<template>
  <div class="recharge">
    <van-nav-bar
      title="会员余额充值"
      left-text=""
      left-arrow
      @click-left="$router.go(-1)"
      :safe-area-inset-top="true"
      z-index="999"
      fixed
    />
    <div class="m-15 mt-50 bfff p-10 pl-20 pr-20">
      <div class="c999">
        <span>会员余额 (元)</span>
        <span class="float_r x_y_center" @click="router.push()">
          充值消费记录
          <van-icon name="arrow" />
        </span>
      </div>
      <div class="money cb31 pt-10 fz_16">0.00</div>
      <div class="x_y_between txt_center mt-10">
        <div>
          <div class="c999">充值本金</div>
          <div class="num mt-5">0.00</div>
        </div>
        <div>
          <div class="c999">充值赠额</div>
          <div class="num mt-5">0.00</div>
        </div>
        <div>
          <div class="c999">礼品卡</div>
          <div class="num mt-5">0.00</div>
        </div>
      </div>
    </div>
    <div class="rechargeMoney pl-20 pr-20">
      <div
        v-for="(item, index) in recharge"
        :key="item.id"
        :class="
          'rechargeCard ' + (activeIndex == index && active ? 'active' : '')
        "
        @click="chooseCard(index)"
      >
        <van-tag
          color="#E8B9C0"
          text-color="#b31731"
          class="tag"
          v-show="activeIndex == index && active"
        >
          <van-icon name="success" />
        </van-tag>
        <img :src="item.card" alt="" />
      </div>
    </div>
    <div>
      <div class="mt-10 ml-20 mb-10">充值须知</div>
      <div class="c999 fz_10 pl-20 pr-20">
        <p>1.使用充值余额购买正价饮晶仍可获赠电子积点。</p>
        <p>
          2.本次充值可开具预付卡充值发票，您可到(订单] - [历史订单] -
          [充值订单]申请开票:按税收政策规定，充值金额消费不能重复开具发票，敬请理解.
        </p>
        <p>
          3.茶额的旧版实体卡(桃李卡小主的卡联卡)已下线，不再进行充值，但仍可在门店出示卡面享受相应折扣，但参与折扣后不能使用会员余额支付，不能积点，不享受周三雨天特惠活动。
        </p>
        <p>
          4. 如您需要充值余额退款服务，请点击<u
            class="c000"
            @click="dialogShow = true"
            >申请余额退款</u
          >
          ，工作人员审核通过后余额将原路退回到您的账户。
        </p>
      </div>
    </div>
    <div class="notice"></div>
    <van-submit-bar
      :price="chooseInfo.money * 100 || 0"
      button-text="充值"
      @submit="onSubmit"
      label=" "
      fixed
      :decimal-length="0"
    >
      <template #top>
        <div class="flex pt-5 pl-20 fz_10">
          <van-checkbox v-model="checked" icon-size="16px" class="mr-5" />
          我已阅读并接受
          <span @click="onClickLink" class="cb31">《会员细则》</span>
          及
          <span @click="onClickLink" class="cb31">《会员充值协议》</span>
        </div>
      </template>
      <template #default>
        <div class="c999 fz_12" v-show="active">
          充值成功后赠送 <span class="cb31">￥{{ chooseInfo.give }}</span>
        </div>
        <div class="c999 fz_12" v-show="!active">
          充值赠好礼
        </div>
      </template>
    </van-submit-bar>
    <van-dialog
      v-model:show="dialogShow"
      title="退款说明"
      :showConfirmButton="false"
    >
      <div class="p-15 fz_10 c999">
        <p>
          1.会员充值余额退款时，仅支持退款充值本金部分,赠额部分不支持退款。例如您充值200元赠送30元，余额退款时仅可退款200元;
        </p>
        <p>
          2.卡券兑换的储值卡金额不可退款,如需退款请购卡认到茶颜悦色公众号联系客服咨询;
        </p>
        <p>
          3.礼品卡内金额不可退款，如需退款请购卡人到茶颜悦色公众号联系客服咨询;
        </p>
      </div>
      <div class="btn">
        <van-button color="#b31731" size="small" block @click="router.push()">
          我知道了,继续申请退款
        </van-button>
        <van-button
          type="default"
          size="small"
          block
          @click="dialogShow = false"
        >
          我再想想,暂不需要退款
        </van-button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default {
  components: {},
  setup() {
    const router = useRouter();
    const state = reactive({
      recharge: [
        {
          id: 1,
          card: "https://e.im5i.com/2021/10/16/UD7r3y.png",
          money: 200,
          give: 30,
        },
        {
          id: 2,
          card: "https://e.im5i.com/2021/10/16/UD7pfD.png",
          money: 100,
          give: 10,
        },
        {
          id: 3,
          card: "https://e.im5i.com/2021/10/16/UD7nZq.png",
          money: 50,
          give: 0,
        },
      ],
      checked: false,
      active: false,
      activeIndex: 0,
      chooseInfo: {},
      dialogShow: false,
    });

    const chooseCard = (index) => {
      console.log(index);
      // 点击的是同一个 则取消
      if (index == state.activeIndex && state.active) {
        state.active = false;
        state.chooseInfo = {};
        return;
      }
      state.active = true;
      state.activeIndex = index;
      state.chooseInfo = state.recharge[index];
    };
    const onSubmit = () => {
      if (!state.active) return Toast("请选择充值金额");
      if (!state.checked) return Toast("请先勾选会员细则及会员充值协议");
      Toast("充值操作");
    };
    return {
      router,
      ...toRefs(state),
      chooseCard,
      onSubmit,
    };
  },
};
</script>

<style lang="less" scoped>
.recharge {
  background: #f8f8f8;
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 80px;
}
.rechargeMoney {
  .rechargeCard {
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid #fff;
    .tag {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 20px;
      border-bottom-left-radius: 10px;
      height: 26px;
    }
  }
  .rechargeCard.active {
    border: 1px solid #e8b9c0;
  }
}
.btn {
  padding: 0 60px;
  .van-button + .van-button {
    margin-top: 10px;
  }
  margin-bottom: 20px;
}
</style>
